<template>
  <div class="login">
    <div class="box">
      <div class="box2">
        <div class="head">
          <div class="img-box">
            <img class="head-logo" src="@/assets/login/logo.svg" alt="" />
            <img class="head-logo2" src="@/assets/login/logo2.svg" alt="" />
          </div>

          <div class="text-box">
            <div class="Ctext">留学CRM管理系统</div>
            <div class="Etext">Management System</div>
          </div>
        </div>
        <div class="bottom">
          <el-input
            class="user"
            placeholder="请输入用户名称"
            prefix-icon="el-icon-lock"
            v-model="loginForm.username"
          >
          </el-input>
          <el-input
            class="password"
            placeholder="请输入登录密码"
            prefix-icon="el-icon-user"
            v-model="loginForm.password"
            show-password
          >
          </el-input>
          <img
            class="next"
            src="@/assets/login/next.svg"
            alt=""
            @click="login"
            @keyup.enter="login"
          />
        </div>
      </div>

      <!-- <div class="warn">
        <img class="warn-img" src="../assets/login/warn.svg" alt="" />
        <span class="warn-text">{{ warn[currentIndex] }} </span>
      </div> -->
    </div>
    <div class="info">
      <div>Copyright www.tttt.com,xxxxxxx</div>
      <div>Email: 58576@qq.com &nbsp; QQ: 5698401</div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import qs from "qs";

import { userLogin } from "@/api";

export default {
  name: "login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },

      warn: ["用户或密码不正确", "请填写用户账号", "请填写用户密码"],
      currentIndex: 0,
    };
  },
  created() {},
  mounted() {
    window.addEventListener("keydown", this.keyDown);
  },

  methods: {
    ...mapMutations(["changeLogin"]),
    login() {
      let _this = this;
      let data = qs.stringify({
        aaa: "",
        username: this.loginForm.username,
        password: this.loginForm.password,
        bbb: "",
      });

      // let data = qs.stringify({
      //   username: this.loginForm.username,
      //   password: this.loginForm.password,
      // });

      if (_this.loginForm.user === "" || _this.loginForm.password === "") {
        alert("账号或密码不能为空");
      } else {
        userLogin(data)
          .then((res) => {
            console.log(res.data);
            console.log(res.data.UserInfo.user.userId);
            // _this.userToken = "Bearer " + res.data.data.body.token;
            // 将用户token保存到vuex中
            _this.changeLogin({ Authorization: res.data.Authorization });
            window.sessionStorage.setItem(
              "userId",
              res.data.UserInfo.user.userId
            );
            window.sessionStorage.setItem("username", res.data.UserInfo.username);
            window.sessionStorage.setItem(
              "avatar",
              res.data.UserInfo.user.avatar
            );

            // sessionStorage.setExpire("Authorization", res.data.Authorization, 5000);
            // sessionStorage.getExpire("Authorization");
            if (res.data.UserInfo.user.username === "admin") {
              window.sessionStorage.setItem(
                "user",
                res.data.UserInfo.user.username
              );
            } else {
              window.sessionStorage.setItem("user", "consultant");
              window.sessionStorage.setItem(
                "consultantId",
                res.data.UserInfo.user.userId
              );
            }
            _this.$router.push({ name: "main" });
            alert("登陆成功");
          })
          .catch((error) => {
            alert("账号或密码错误");
            console.log(error);
          });
      }
    },
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode === 13) {
        this.login();
      }
    },
  },
  destroyed() {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
  },
};
</script>

<style scoped>
.login {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../assets/bgc.jpg");
  background-size: 100% 100%;
}

.box {
  position: absolute;
  width: 100%;
  height: 350px;
  background-color: rgba(117, 119, 117, 0.8);
  top: 50%;
  transform: translateY(-50%);
}

.box2 {
  margin-left: 60%;
  transform: translateX(-60%);
}

.head {
  position: relative;
  display: flex;
  /* text-align: center; */
  /* width: 60%; */
  margin-top: 60px;
  /* margin-left: 60%;
  transform: translateX(-50%); */
}
.head-logo2 {
  position: absolute;
  left: 13px;
  top: 20px;
}

.text-box {
  margin-left: 15px;
}

.text-box .Ctext,
.text-box .Etext {
  font-weight: 700;
  color: #fff;
  font-size: 36px;
}

.bottom {
  display: flex;
  margin-top: 40px;
  /* margin-left: 60%;
  transform: translateX(-50%); */
}

.bottom .user {
  margin-right: 30px;
}

.bottom .user,
.bottom .password {
  width: 200px;
}

.bottom .next {
  margin-left: 30px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.warn {
  position: relative;
  margin-top: 20px;
  /* margin-left: 60%;
  transform: translateX(-50%); */
}

.warn .warn-img {
  position: absolute;
  width: 24px;
  height: 24px;
  top: -2px;
}

.warn .warn-text {
  color: #e6a623;
  margin-left: 35px;
}

.info {
  color: #ccc;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>